<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>添加多图文消息</title>
	<link rel="shortcut icon" type="image/ico" href="${basePath}/favicon.ico?v=1"/>
	<link rel="stylesheet" type="text/css" href="${basePath}/css/style-1.css" />
	<link rel="stylesheet" type="text/css" href="${basePath}/css/style_2_common.css" />
	<link rel="stylesheet" type="text/css" href="${basePath}/css/more_img.css" />
	<link rel="stylesheet" type="text/css" href="${basePath}/css/cymain.css" />
	<script type="text/javascript" src="${basePath}/js/jquery-1.8.3.min.js"></script>
	<link rel="stylesheet" type="text/css" href="${basePath}/js/layer/skin/layer.css" />
    <script type="text/javascript" src="${basePath}/js/layer/layer.m.js"></script>
</head>
<body id="nv_member" class="pg_CURMODULE">
<#assign current='menu_mul'>
	<div id="wp" class="wp">
		<#include "/include/header.html"/>
		<!--中间内容-->
		<div class="contentmanage">
			<div class="developer">
				<div class="tableContent">
					<#include "/include/left.html"/>
					<#include "/include/wxtop.html"/>
					<div class="content">
						<div class="cLineB">
							<h4 style="font-size:16px;">多图文回复</h4>
							<div class="clr"></div>
						</div>
						<a name="main"></a>
						<div style="margin: 10px auto;height:auto;" class="ftip">
							<strong>请注意：</strong>多图文中的文章数据最多只允许添加十个，超过十个文章的多图文不会被响应，为了用户的体验请合理安排文章数目！
						</div>
						<div class="msgWrap form">
							<ul id="tags" style="width: 100%">
								<li class="selectTag"><a href="${basePath}/admin/mul/index">添加多图文回复</a></li>
								<li><a href="${basePath}/admin/mul/list">多图文回复列表</a></li>
								<div class="clr" style="height: 1px; background: #eee; margin-bottom: 20px;"></div>
							</ul>
						</div>
						<form method="post" action="${basePath}/admin/mul/persis" onsubmit="return checkForm();">
							<input type="hidden" name="picIds" id="input_picIds" />
							<table class="userinfoArea" border="0" cellspacing="0" cellpadding="0" width="100%">
								<tbody>
									<tr>
										<th valign="top">关键词</th>
										<td>
											<input type="text" maxlength="50" class="px" name="keyword" value="" />
										</td>
									</tr>
									<tr>
										<th valign="top"><label for="keyword">图文消息</label></th>
										<td>
											<div style="width:100%;">
											<a href="javascript:void(0);" onclick="addMessage();" class="a_choose">添加图文消息</a>&nbsp;&nbsp;
											<a href="javascript:void(0);" onclick="clearMessage();" class="a_clear">清空重选</a>
											</div>
											<!-- 单图文 -->
											<div class="chatPanel" style="width: 280px;" id="singlenews">
												<div un="item_1741035" class="chatItem you">
													<a target="ddd" href="javascript:void(0);">
														<div class="media mediaFullText" id="titledom">
															<div class="mediaPanel">
																<div class="mediaHead">
																	<span class="title" id="span_title">图文消息标题</span> 
																	<span class="time" id="span_today">2015-07-07</span>
																	<div class="clr"></div>
																</div>
																<div class="mediaImg">
																	<img id="suicaipic1" src="${basePath}/images/temp1.jpg">
																</div>
																<div class="mediaContent mediaContentP">
																	<p id="p_summry">消息简介</p>
																</div>
																<div class="mediaFooter">
																	<span class="mesgIcon right"></span> <span
																		style="line-height: 50px;" class="left">查看全文</span>
																	<div class="clr"></div>
																</div>
															</div>
														</div>
													</a>
												</div>
											</div>
											<!-- 多图文列表 -->
											<div class="media_preview_area" id="multinews" style="width: 300px; display:none; margin-top:10px;">
												<div class="appmsg multi editing">
													<div class="appmsg_content" id="js_appmsg_preview">
														<div class="js_appmsg_item " data-id="1" data-fileid="" id="appmsgItem1">
															<div class="appmsg_info"><em class="appmsg_date"></em></div>
															<div id="multione" class="cover_appmsg_item">
																<h4 class="appmsg_title"><a id="mul_a_title" onclick="return false;" href="javascript:void(0);">图文内容一</a></h4>
																<div class="appmsg_thumb_wrp">
																	<i style="background: url(http://image.pigcms.com/demotoken/2014/05/07/1399477232_6ebdc5b80d67ad95.jpg); background-size: 100% 100%" class="appmsg_thumb default">&nbsp;</i>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</td>
										<td>&nbsp;</td>
									</tr>
									<tr>
										<th></th>
										<td>
											<button type="submit" class="btnGreen">保存</button>
										</td>
									</tr>
								</tbody>
							</table>
						</form>
					</div>
					<div class="clr"></div>
				</div>
			</div>
		</div>
		<!--底部-->
		<div style="display:none;" id="pick_item_com">
			<div style="font-size: 14px; padding: 30px 20px 10px 20px;">
			<div style="background: #fefbe4; border: 1px solid #f3ecb9; color: #993300; padding: 10px;margin: 5px auto 5px auto;">
				使用方法：点击对应内容后面的“选中”即可。
			</div>
			<table class="ListProduct" border="0" cellspacing="0" cellpadding="0"
				width="100%">
				<thead>
					<tr>
						<th>标题</th>
						<th style="width: 80px;">操作 <span class="tooltips"></span></th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
	</div>
	<#include "/include/footer.html"/>

<script type="text/javascript">
	function go(pageIndex){
		$(".layui-layer-content table tbody").html("");
		$(".layui-layer-content table").next().remove();
		makeData(pageIndex, '.layui-layer-content');
	}
	function makeData(pageIndex, select){
		if(!select){
			select = "#pick_item_com";
		}
		var $tBody = $(select+" table tbody");
		$.post("${basePath}/admin/pic/ajax", {"currentPage":pageIndex}, function(data){
			for(var i=0;i<data.recordList.length;i++){
				var bean = data.recordList[i];
				var title = bean.title;
				var id = bean.id;
				var $tr = $('<tr><td>'+title+'</td><td class="norightborder"><a href="javascript:void(0);" onclick="pickItem('+id+',\''+bean.pImgHref+'\', \''+title+'\');">选中</a></td></tr>')
				$tBody.append($tr);			
			}
			//分页
			var currentPage=data.currentPage;
			var total=data.total;
			var pages=data.pages;
			var previouspage=data.previouspage;
			var nextpage=data.nextpage;
			var pageText = '<div class="cLine"><div class="pageNavigator right"><div class="pages">共';
			pageText += total+"条记录  ";
			if(pages>0){
				pageText += currentPage;
			}else{
				pageText += 0;
			}
			pageText += "/" + pages + "页";
			if(currentPage>1){
				pageText += '<a href="javascript:go(1);">首页</a>';
			}
			if(previouspage>1){
				pageText += '<a href="javascript:go('+previouspage+');">上一页</a>';
			}
			if(nextpage < pages){
				pageText += '<a href="javascript:go('+nextpage+');">下一页</a>';
			}
			if(currentPage < pages){
				pageText += '<a href="javascript:go('+pages+');">最后一页</a>'
			}
			var $table = $(select+" table");
			$table.after(pageText);
		},'json');
	}
	$(function (){
		makeData(1);
		var today = new Date();
		var year = today.getFullYear();
		var month = today.getMonth() + 1;
		if(month<10) month = '0'+month;
		var day = today.getDay();
		if(day<10) day = '0'+day; 
		nowStr = year +"-"+ month + "-" + day;
		$("#span_today").text(nowStr);
	});
	var layerIndex = 0;
	function addMessage(){
		layerIndex = layer.open({
		    type: 1,
		    area: ['600px', '450px'],
		    scrollbar:false,
		    fix: true,
		    title: '选择图文消息',
		    content: $("#pick_item_com").html()
		});
	}
	function clearMessage(){
		$picIds = $("#input_picIds");
		$picIds.val('');
		$("#appmsgItem1").siblings().remove();
		
		//清空图片预览
		var $one = $("#singlenews");
		var $mul = $("#multinews");
		$one.show();
		$mul.hide();
		$("#titledom").hide();
	}
	function pickItem(id, url, title){
		//设置picIds的值
		$picIds = $("#input_picIds");
		var picIds = $picIds.val();
		var idArray = picIds.split(',');
		var isexist = false;
		for(var k=0;k<idArray.length;k++){
			if(idArray[k]==id){
				isexist = true;
				break;
			}
		}
		if(isexist){
			layer.msg('图文已存在，请选择其它图文', function(){});
			return;
		}
		layer.close(layerIndex);
		$picIds.val(picIds+''+id+',');
		
		//设置图片
		var ids = $picIds.val();
		var $one = $("#singlenews");
		var $mul = $("#multinews");
		var $preview = $("#js_appmsg_preview");
		idArray = ids.split(",");
		if(idArray.length>11){
			layer.msg('最多添加十篇文章！', function(){});
			return;
		}else if(idArray.length>2){
			$one.hide();
			$mul.show();
			
			var $item = $('<div class="appmsg_item js_appmsg_item "><i style="background: url(' + url+'); background-size: 100% 100%" class="appmsg_thumb default">&nbsp;</i><h4 class="appmsg_title"><a href="javascript:void(0);">'+title+'</a></h4>');
			$preview.append($item);
		}else{
			$("#titledom").show();
			$one.show();
			$mul.hide();
			$("#span_title").text(title);
			if(url!=null && url!=''){
				$("#suicaipic1").attr("src", url);
				//mul part
				$("#multione i").css("background","url("+url+")").css("background-size", "100% 100%");
				$("#mul_a_title").text(title);
			}
		}
	}
	function checkForm(){
		var $input_picIds = $("#input_picIds");
		if($input_picIds.val()==""){
			layer.alert("请选择图文消息",{icon:0});
			return false;
		}
		var $kw = $("input[name='keyword']").val();
		if($kw.replace(" ","")==''){
			layer.alert("请填写关键词",{icon:0});
			return false;
		}
		
		if($kw.val().length>50){
			layer.alert("关键词过长，不要超出50个",{icon:0});
			$kw.focus();
			return false;
		}
		return true;
	}
</script>
</body>
</html>